<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选、全不选、反选</title>
</head>
<!-- 
   // 不足文档
   onclick-------onchange (单选框  复选框  下拉列表框   )

   以后属于同意操作类型 尽量归为一类，好操作！

 -->
<body>
    <input type="checkbox" class="qx">全选/全不选 <input type="checkbox" class="fx">反选
    <br>
    <br>
    <input type="checkbox" checked class="b1">编号一
    <input type="checkbox" class="b2">编号二
    <input type="checkbox" class="b3">编号三
    <br>
    <br>
    <br>
    <br>

    <script>
    var qx = document.querySelector('.qx')
    var fx = document.querySelector('.fx')
    var b1 = document.querySelector('.b1')
    var b2 = document.querySelector('.b2')
    var b3 = document.querySelector('.b3')

    qx.onclick = function () {
        if (this.checked) {
            b1.checked = true
            b2.checked = true
            b3.checked = true
        } else {
            b1.checked = false
            b2.checked = false
            b3.checked = false
        }
    }

    fx.onclick = function () {
        b1.checked = !b1.checked
        b2.checked = !b2.checked
        b3.checked = !b3.checked

        if (b1.checked == false || b2.checked == false || b3.checked == false) {
            qx.checked = false
            returen
        } qx.checked = true
    }

    b1.onclick = bb;
    b2.onclick = bb;
    b3.onclick = bb;
    function bb() {
        if (b1.checked == false || b2.checked == false || b3.checked == false) {
            qx.checked = false
            black;
        } else {
            qx.checked = true
            black;
        }
    }
</script>




<!-- #   老师例子
####################################################################################
-->
<body>
    <!-- 3、实现 表单中    全选/全不选    反选 的操作

    项目：   游泳    爬山   看书 -->
    <input type="checkbox" id="allSel">全选/全不选 <input type="checkbox" id="revSel">反选
    <h2>项目</h2>
    <div class="list">
        <input type="checkbox" checked>游泳<input type="checkbox">爬山<input type="checkbox">看书
    </div>
    <script>
        //1.查
        var allSel = document.querySelector('#allSel');
        var revSel = document.querySelector('#revSel');
        var ipts = document.querySelectorAll('.list>input');
        //2.加事件 全选框  onclick-------onchange (单选框  复选框  下拉列表框   )
        allSel.onchange = function () {
              if(this.checked){
                  for(var i=0;i<ipts.length;i++){
                     ipts[i].checked=true;
                  }

              }else{
            //     for(var i=0;i<ipts.length;i++){
            //          ipts[i].checked=false;
            //       }

              }
            // 同选，同不选
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = this.checked;
            }

        }

        //3. 反选 加事件
        revSel.onchange = function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = !ipts[i].checked
            }
            // 解决bug

            // for (var i = 0; i < ipts.length; i++) {
            //     if (ipts[i].checked == false) {
            //         allSel.checked = false;
            //         return;
            //     }
            // }

            // // 没有一项未选中，表示全部选中
            // allSel.checked = true;
        }

        //4. 子项 控制父项

        /* 
         4.1子项都要加事件   （遍历来加事件）
         4.2  看下面的所有子项，是否全部选中， 如果有一项未选项，全选不能选中， 全部选中，全选才能选
         */

        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onchange = function () {
                for (var i = 0; i < ipts.length; i++) {
                    if (ipts[i].checked == false) {
                        allSel.checked = false;
                        return;
                    }
                }

                // 没有一项未选中，表示全部选中
                allSel.checked = true;

            }
        }
    </script>
</body>


</html>